Overview
This section demonstrates how to use ZK JSP tags in your JSP document.
Prerequisite
DOCTYPE
To use ZK components correctly, the JSP page must specify DOCTYPE as follows.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
...
BODY Style
By default, ZK will set the CSS style of the BODY tag to width:100%;height:100% If you prefer to have the browser to decide the height (i.e., the browser's default), you could specify height:auto to the BODY tag (optional).
<body style="height:auto">
...
Browser Cache
Though optional, it is suggested to disable the browser to cache the result page. It can be done as follows.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
In additions, you could invoke the following statement in JSP to tell ZK to drop desktops once the user navigates to other URL. It is optional but it saves memory since the browser page is not cached and safe to remove if the user navigates away.
<%
request.setAttribute(org.zkoss.zk.ui.sys.Attributes.NO_CACHE, Boolean.TRUE);
%>
Notice that it has to be invoked before ZK JSP's zkhead tag, if ZK JSP is used, or before the first jsp:include that includes a ZUL page.
Taglib Declaration
Using ZK JSP Tags is the same as using other JSP tag libraries. You can declare a <%@taglib %> to define the prefix and mapping URI of the ZK JSP Tags as follows:
<%@ taglib uri="http://www.zkoss.org/jsp/zul" prefix="z" %>
Head Tag Declaration
since 1.3.0
Generate zk's <link> in a specific place
In some cases, developers will include two or more ZK pages, and each page will have its own <link> (containing JavaScript and Style Sheet). This makes customization a hard work. Besides, every time the developer places a <page> into the BODY of JSP page, zk will generate a corresponding <link> into the BODY, and this would diminish page performance. So the best solution is to add a <zkhead /> into the HEAD tags, then zk will generate only the desired JS and CSS.
This is also required by some features such like hflex/vflex.
<head>
<z:zkhead />
...
</head>
Page Tag Declaration
In ZK world, every ZK component must be contained by a Desktop instance. It will manage the Ajax connections of each component. In JSP, you have to specify a <page> tag to initialize the Desktop instance if it's not existed:
<z:page zscriptlanguage="java" >
...
// The ZK Component Tags declaration Area...
... </z:page>
// Wrong place to put ZK Component Tags...
The page tag also creates a Page instance automatically, and this page instance is a container to contain components. In one JSP document, you can declare multiple pages like this:
<z:page id="pg1" style="height:100px;width=300px">
// The ZK Components declaration Area...
</z:page>
//Other JSP Content...
<z:page id="pg2" style="height:100px;width=300px">
// The ZK Components declaration Area...
</z:page
The rule to access variables across pages is the same as to do so in pure ZK document. For more detailed information about Page(Page), please refer to ZK Developer's Reference.
Component Tag Declaration
After declaring page tag, now we can add some component tags into it. For example:
<z:page>
<z:window id="myWin" title="ZK JSP Tags Demo">
Hello ZK JSP Tags! <z:textbox/>
</z:window>
<h1>mix with other tags.</h1>
As you can see, the code is very similar to a typical ZUML document, except that you need to add proper prefix for each tag and use <z:page> tag instead of <zk> tag.
A Simple JSP page
Let us see a simple JSP page:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.zkoss.org/jsp/zul" prefix="z"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<z:zkhead />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello ZK!</title>
</head>
<body>
<z:page zscriptLanguage="java">
<z:window border="normal">
Hello ZK!
</z:window>
</z:page>
</body>
</html>
Page Defined ZK Component in JSP
To support ZK's dynamic component definition in JSP page parsing life-cycle, we introduced two JSP tags, one is for definition, the <z:component> tag, and the other is for declaration, the <z:ui> tag. In zk jsp demo( downloadable archive is here), you can take a look at index.jsp to see how it works:
<z:component name="hp-link" extends="toolbarbutton" class="org.zkoss.jspdemo.ui.HPLink" />
...
<z:ui tag="hp-link" url="./foreach.jsp" label="forEach Demo" />
Version History
| Version | Date | Content |
|---|---|---|